<template>
  <div class="hotelMap">
    <!-- 展示地图 -->
    <div class="map">
        <div id="container"></div>
        <div id="mapLoading" v-if="mapLoading">
        <img src="../../static/loading2.gif">
        </div>
    </div>
  </div>
</template>

<script>
export default {
    props: {
        transmitHotels: {
            type: Object,
            default: {}
        }
    },
    data(){
        return {
            // 地图加载中提示
            mapLoading: true,
            // 高德地图根元素
            map: '',
            // 搜索到的城市详情
            cityData: '',
            // 定位到的城市名称
            cityName: '',
            // 查询到的所有旅店
            hotels: {},
            // 经纬度
            latitude: '39.908775',
            longitude: '116.406315',
            // 城市区域
            cityscenics: []
        }
    },
    methods:{
        // 初始化城市和旅馆
        async initCityAndHotels(){
            await this.positionCityName();
        },
        // 定位到当前城市
        positionCityName(){
            // 获取到当前的城市名称
            if(this.$store.state.hotel.cityName){
                this.$emit('initCityName',this.$store.state.hotel.cityName);
                return;
            }
            return new Promise((resolve, reject) => {
                setTimeout(() =>{
                    AMap.plugin('AMap.CitySearch', () => {
                        var citySearch = new AMap.CitySearch()
                        citySearch.getLocalCity(async (status, result) => {
                            if (status === 'complete' && result.info === 'OK') {
                                // 将当前定位到的城市名称保存起来
                                this.cityName = result.city;
                                let { lat,lng } = result.bounds.southwest;
                                this.latitude = lat;
                                this.longitude = lng
                                this.$store.commit('hotel/saveCityName',this.cityName)
                                this.$emit('initCityName',this.cityName);
                                resolve(result.city);
                            }
                        })
                    })
                },1000)
            })
        },
        // 获取到当前城市的旅馆
        initCitys(){
            // 获取到第一家酒店的坐标作为地图的中心点
            setTimeout(() => {
                if(this.transmitHotels && this.transmitHotels.data.data.length > 0){
                    let { latitude,longitude } = this.transmitHotels.data.data[0].location;
                    this.latitude = latitude;
                    this.longitude = longitude;
                }
                // 停止加载动画
                this.mapLoading = false;
                // 构建map实例
                let map = new AMap.Map('container',{
                    zoom: 15,//级别,
                    resizeEnable: true,
                    center: [this.longitude, this.latitude]
                });
                this.map = map;
                // 构建图标
                var icon = new AMap.Icon({
                    size: new AMap.Size(30, 30),    // 图标尺寸
                    image: 'http://www.yusen.space:8889/toDoList/img/hotel_1.png',  // Icon的图像
                    imageSize: new AMap.Size(30, 30)   // 根据所设置的大小拉伸或压缩图片
                });
                // 所有的标记列表
                let markerList = [];
                if(this.transmitHotels && this.transmitHotels.data.data.length > 0){
                    this.transmitHotels.data.data.forEach(ele => {
                        let marker = new AMap.Marker({
                            size: new AMap.Size(30, 30),
                            position: new AMap.LngLat(ele.location.longitude,ele.location.latitude),
                            offset: new AMap.Pixel(-10, -10),
                            icon: icon, // 添加 Icon 实例
                            zoom: 13,
                            title: ele.name
                        });
                        // let infoWindow = new AMap.InfoWindow({
                        //     isCustom: true,  //使用自定义窗体
                        //     content: createInfoWindow(title, content.join("<br/>")),
                        //     offset: new AMap.Pixel(16, -45)
                        // });
                        // AMap.event.addListener(marker, 'click', function () {
                        //     infoWindow.open(map, marker.getPosition());
                        // });
                        markerList.push(
                            marker
                        )
                    })
                }
                map.add(markerList);
            },10)
        }
    },
    watch:{
        'transmitHotels'(){
            this.initCitys();
        }
    },
    // 获取到酒店旁边的
    mounted(){
        this.initCityAndHotels();
    }
}
</script>

<style scoped lang="less">
    .hotelMap{
        // 高德地图
        .map{
          position: relative;
          box-shadow: 8px 6px 6px 0 rgba(0, 0, 0, 0.1);
          border-radius: 5px;
          overflow: hidden;
          #container,
          #mapLoading{
            width:500px; 
            height: 300px; 
          }
          // 加载中gif
          #mapLoading{
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
    }
</style>